<template>
    <div class="scene-left width-col-6">
     <p class="scene-left-title">场景标签库</p>
      <MyTree ref="myTreeRef" :treeData="treeData" @TreeNodeClick="TreeNodeClick" :fromCreateTaskPage="fromCreateTaskPage"/>
      <!-- 自定义组 -->
      <CustomGroup 
        :fromCreateTaskPage="fromCreateTaskPage" 
        :customGroups="customGroups" 
        :closeEditInput="closeEditInput"
        @handleCreateGroup="submitCreateGroup"
        @handleClickCustomGroup="clickCustomGroup"
        @handleEditCustomGroup="submitEditGroup"
        @handleDeleteCustomGroup="deleteCustomGroup"/>
      <!-- 删除弹窗 -->
      <DeleteDialog :visible="isVisibleDeleteModal" :content="deleteContentText" @closeDialog="closeDeleteDialog" @submitDelete="submitDelete"/>
    </div>
 </template>
 <script>
 import {mapState} from 'vuex'
 import { fetchCaseCategory,  fetchCustomGroup,createCustomGroup,updateCustomGroup,deleteCustomGroup } from '@/api/case'
 import MyTree from '@/components/MyTree'
 import DeleteDialog from '@/components/DeleteDialog'
 import CustomGroup from '@/components/CustomGroup'
 export default {
    components:{
      MyTree,
      DeleteDialog,
      CustomGroup
    },
    data(){
      return {
        deleteContentText: '确认删除该自定义组吗？删除时会将组里的数据一起清除。',
        treeData:[],
        customGroups: [],
        isVisibleDeleteModal: false,
        closeEditInput:false,

      }
    },
    props: {
      run_mode: String,
      fromCreateTaskPage: Boolean
    },
    computed:{
      ...mapState({
        checkedCustomGroup: state => state.scene.checkedCustomGroup
      })
    },
    watch:{
      run_mode(newVal){
        this.getCaseCategory()
        this.getCustomGroup()
      }
    },
    mounted(){
      this.getCaseCategory()
      this.getCustomGroup()
    },
    // 离开前将上次选中的侧边 category置回空
    beforeDestroy(){
      if(this.run_mode === 'worldsim'){
        this.$store.dispatch('scene/updateTreeIdForWorldsim', '')  
        }
        if(this.run_mode === 'log2world'){
          this.$store.dispatch('scene/updateTreeIdForLog2world', '')  
        } 
    },
     methods:{
      // 获取worldsim、log2world 的左侧目录树
      getCaseCategory(){     
        fetchCaseCategory({run_mode:this.run_mode}).then(res => {
          if(res && res.data){
            this.treeData = res.data
          }
        })
      },
      TreeNodeClick(id){
        // 点击tree 告知右侧为 默认标签库
        this.$store.dispatch('scene/updateCheckedCustomGroup', {})
        this.$store.dispatch('scene/updateIsCommonCategory', true)
        // 将id 存入 store
        if(this.run_mode === 'worldsim'){
          this.$store.dispatch('scene/updateTreeIdForWorldsim', id)  
        }
        if(this.run_mode === 'log2world'){
          this.$store.dispatch('scene/updateTreeIdForLog2world', id)  
        }
       
      },
      // 获取自定义组列表
      getCustomGroup(){
        fetchCustomGroup({run_mode: this.run_mode}).then(res => {
          if(res && res.data){
            this.customGroups = res.data
          }
          
        })
      },
      // 提交 创建的group
      submitCreateGroup(data){
        let params = {
          run_mode: this.run_mode, // worldsim 或者 log2world
          group: data
        }
        createCustomGroup(params).then(res => {
          this.$message.success('创建自定义组成功')
          this.getCustomGroup()
        })
      },
      clickCustomGroup(data){
        // 告知右侧为 自定义组
        this.$store.dispatch('scene/updateIsCommonCategory', false)
        this.$store.dispatch('scene/updateCheckedCustomGroup', data)
        this.$refs.myTreeRef.$refs.treeRef.setCurrentKey(null);
      },
       // 提交 编辑的group
      submitEditGroup(params){
        updateCustomGroup(params).then(res => {
          this.$message.success('修改自定义组成功')
          this.getCustomGroup()
          this.closeEditInput= true
          setTimeout(() => {
            this.closeEditInput= false
          }, 500);
        })
      },
      deleteCustomGroup(){
        this.isVisibleDeleteModal = true
      },
      closeDeleteDialog(){
        this.isVisibleDeleteModal = false
      },
      // 提交 删除group
      submitDelete(){
        let params = {
          run_mode: this.run_mode,
          delete_group: this.checkedCustomGroup.id
        }
        deleteCustomGroup(params).then(res => {
          this.isVisibleDeleteModal = false
          this.$message.success('删除自定义组成功')
          this.getCustomGroup()
          this.$store.dispatch('scene/updateCheckedCustomGroup', {})
        })
      }
    }
 }
 </script>
 <style lang="scss" scoped>
 @import '@/styles/vars.scss' ;
 .main-wrapper {
   
   .scene-left{
     border-right: 1px solid rgba(0, 0, 0, 0.12);
     height: calc(100vh - 40px - $header-height);
     overflow: auto;
   }
   .scene-left-title{
     color: #293b5a;
     padding: 21.5px;
     font-size: 13px;
     font-family: Source Han Sans CN;
     font-weight: 600;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   }
   .scene-left-ul{
     // padding: 20px;
     >li {
       padding: 10px 0;
       cursor: pointer;
       i{
         margin-left: 20px;
       }
       span {
         margin-left: 5px;
       }
       &.active{
         background-color: rgb(74, 144, 226);
         color: #fff;
       }
     }
   }
 }
 </style>